<template>
  <div class="page_addApply">
    <div class="apply_title">变更的各大工程投资情况</div>
    <el-form
      ref="alterationRecordVO"
      :model="alterationRecordVO"
      :inline="true"
      label-width="160px"
    >
      <div>
        <el-form-item label="工程总投资" class="common_input">
          <el-input type="number" v-model="alterationRecordVO.totalInvestment"></el-input>(万元)
        </el-form-item>
      </div>
      <div>
        <el-form-item label="工程施工费" class="common_input">
          <el-input type="number" v-model="alterationRecordVO.constructionFee"></el-input>(万元)
        </el-form-item>
      </div>
      <div style="margin-left: 150px;">
        <el-form
          ef="alterationRecordVO"
          :inline="true"
          :model="alterationRecordVO"
          label-width="120px"
        >
          <el-form-item label="田间道路工程费" class="common_input1">
            <el-input type="number" v-model="alterationRecordVO.constrRoadFee"></el-input>
            <span>(万元)</span>
          </el-form-item>
          <el-form-item label="土地平整工程费" class="common_input1">
            <el-input type="number" v-model="alterationRecordVO.constrLandFee"></el-input>
            <span>(万元)</span>
          </el-form-item>
          <el-form-item label="农田水利工程费" class="common_input1">
            <el-input type="number" v-model="alterationRecordVO.constrFarmlandFee"></el-input>
            <span>(万元)</span>
          </el-form-item>
          <el-form-item label="生态保护工程费" class="common_input1">
            <el-input type="number" v-model="alterationRecordVO.constrEcologicalFee"></el-input>
            <span>(万元)</span>
          </el-form-item>
          <el-form-item label="其它工程费" class="common_input1">
            <el-input type="number" v-model="alterationRecordVO.constrOtherFee"></el-input>
            <span>(万元)</span>
          </el-form-item>
        </el-form>
      </div>
      <el-form-item label="设备购置费" class="common_input">
        <el-input type="number" v-model="alterationRecordVO.equipmentPurchaseFee"></el-input>(万元)
      </el-form-item>
      <el-form-item label="其他费用" class="common_input">
        <el-input type="number" v-model="alterationRecordVO.otherFee"></el-input>(万元)
      </el-form-item>
      <div>
        <el-form-item label="不可预见费用" class="common_input">
          <el-input type="number" v-model="alterationRecordVO.imprevisionFee"></el-input>(万元)
        </el-form-item>
      </div>
      <el-form-item label="项目建设亩均投资" class="common_input">
        <el-input type="number" v-model="alterationRecordVO.projectPerAcreInverstment"></el-input>(万元)
      </el-form-item>
      <el-form-item label="新增耕地亩均投资" class="common_input">
        <el-input type="number" v-model="alterationRecordVO.incrLandPerAcreInverstment"></el-input>(万元)
      </el-form-item>
    </el-form>

    <div class="apply_title">变更的建设信息</div>
    <el-form
      ref="alterationRecordVO"
      :model="alterationRecordVO"
      :inline="true"
      label-width="160px"
    >
      <div>
        <el-form-item label="变更建设总规模" class="common_input">
          <el-input type="number" v-model="alterationRecordVO.totalScale"></el-input>
          <span>（公顷）</span>
        </el-form-item>
      </div>
      <el-form-item label="变更整理规模" class="common_input1">
        <el-input type="number" v-model="alterationRecordVO.tidyScale"></el-input>
        <span>（公顷）</span>
      </el-form-item>
      <el-form-item label="变更开发规模" class="common_input1">
        <el-input type="number" v-model="alterationRecordVO.exploitScale"></el-input>
        <span>（公顷）</span>
      </el-form-item>
      <el-form-item label="变更复垦规模" class="common_input1">
        <el-input type="number" v-model="alterationRecordVO.reclamationScale"></el-input>
        <span>（公顷）</span>
      </el-form-item>
      <div>
        <el-form-item label="变更新增耕地总面积" class="common_input">
          <el-input type="number" v-model="alterationRecordVO.incrLandTotalArea"></el-input>
          <span>（公顷）</span>
        </el-form-item>
      </div>
      <el-form-item label="变更新增整理耕地面积" class="common_input1">
        <el-input type="number" v-model="alterationRecordVO.incrTidyArea"></el-input>
        <span>（公顷）</span>
      </el-form-item>
      <el-form-item label="变更新增开发耕地面积" class="common_input1">
        <el-input type="number" v-model="alterationRecordVO.incrExplotArea"></el-input>
        <span>（公顷）</span>
      </el-form-item>
      <el-form-item label="变更新增复垦耕地面积" class="common_input1">
        <el-input type="number" v-model="alterationRecordVO.incrReclamationArea"></el-input>
        <span>（公顷）</span>
      </el-form-item>
      <div>
        <el-form-item label="变更基本农田开发规模" class="common_input">
          <el-input type="number" v-model="alterationRecordVO.farmlandExplotScale"></el-input>
          <span>（公顷）</span>
        </el-form-item>
      </div>
      <el-form-item label="变更可用于占补平衡面积" class="common_input1">
        <el-input type="number" v-model="alterationRecordVO.useBalaceArea"></el-input>
        <span>（公顷）</span>
      </el-form-item>
      <el-form-item label="变更建成高标准基本农田规模" class="common_input1">
        <el-input type="number" v-model="alterationRecordVO.highStandFarmlandScale"></el-input>
        <span>（公顷）</span>
      </el-form-item>
      <el-form-item label="变更灾毁耕地面积" class="common_input1">
        <el-input type="number" v-model="alterationRecordVO.disasterDamageLand"></el-input>
        <span>（公顷）</span>
      </el-form-item>
    </el-form>

    <div class="apply_title">变更的设计信息</div>
    <el-row style="margin-bottom: 60px;margin-left: 20px;">
      <el-row>
        <el-col :span="2" class="x-subtitle">变更原因</el-col>
        <el-col :span="22" class="x-textarea">
          <el-input
            type="textarea"
            v-model="alterationRecordVO.alterationReason"
            :rows="8"
            style="width:70%"
          ></el-input>
        </el-col>
        <el-col :span="2" class="x-subtitle">变更内容</el-col>
        <el-col :span="22" class="x-textarea">
          <el-input
            type="textarea"
            v-model="alterationRecordVO.alterationContent"
            :rows="8"
            style="width:70%"
          ></el-input>
        </el-col>

        <el-col :span="2" class="x-subtitle">造价影响情况</el-col>
        <el-col :span="22" class="x-textarea">
          <el-input
            type="textarea"
            v-model="alterationRecordVO.impactCondition"
            :rows="8"
            style="width:70%"
          ></el-input>
        </el-col>
      </el-row>
    </el-row>

    <div class="apply_title">附件信息</div>
    <div>
      <span>设计变更成果模板</span>
      <el-button size="small" @click="handleDownloadTemp">下载</el-button>
    </div>
    <div style="margin-top: 10px;">
      <span>设计变更成果</span>
      <el-upload
        style="display: inline-block"
        :action="$https + uploadUrl"
        :headers="{authorization: token}"
        :on-success="uploadSuccess"
        :file-list="fileList"
        :limit="1"
      >
        <el-button size="small">上传</el-button>
      </el-upload>
    </div>
    <div class="btn">
      <el-button type="primary" @click="submitDesignChangeInfo">提交</el-button>
      <el-button @click="cancelDesignChangeInfo">取消</el-button>
    </div>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import config from "@/config/index.js";
import moment from "moment";
import {
  getInvAndCon,
  getAdvice,
  addAdvice,
  getSignature
} from "@/api/plannDesignBudget/reviewOpinions.js";
import { addAlterationRecord } from "@/api/project1/designChange/countyApply/index";

export default {
  name: "addDesignChangeApply",
  data() {
    return {
      projectId: this.$route.query.projectId,
      fileList: [],
      token: getToken(),
      uploadUrl: "/renovation/designAlteration/uploadAndAnalysisAlterationZip",
      alterationRecordVO: {
        projectId: "",
        totalInvestment: "",
        constructionFee: "",
        constrRoadFee: "",
        constrLandFee: "",
        constrFarmlandFee: "",
        constrEcologicalFee: "",
        constrOtherFee: "",
        equipmentPurchaseFee: "",
        otherFee: "",
        imprevisionFee: "",
        projectPerAcreInverstment: "",
        incrLandPerAcreInverstment: "",
        totalScale: "",
        tidyScale: "",
        exploitScale: "",
        reclamationScale: "",
        incrLandTotalArea: "",
        incrTidyArea: "",
        incrExplotArea: "",
        incrReclamationArea: "",
        farmlandExplotScale: "",
        useBalaceArea: "",
        highStandFarmlandScale: "",
        disasterDamageLand: "",
        alterationReason: "",
        alterationContent: "",
        impactCondition: "",
        alterationZipId: ""
      }
    };
  },

  methods: {
    // 确认添加变更信息
    submitDesignChangeInfo() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      this.alterationRecordVO.projectId = this.projectId;
      addAlterationRecord(this.alterationRecordVO)
        .then(res => {
          loading.close();
          this.$message.success("操作成功");
          this.$router.back(-1);
        })
        .catch(err => {
          loading.close();
        });
    },

    // 取消变更信息
    cancelDesignChangeInfo() {
      for (let i in this.alterationRecordVO) {
        this.alterationRecordVO[i] = "";
      }
    },

    //设计成果模板下载
    handleDownloadTemp() {
      let a = document.createElement("a");
      a.href = config.baseUrl + "/renovation/templatefile/设计变更上传数据.zip";
      a.target = "_blank";
      a.click();
    },

    // 文件上传成功
    uploadSuccess(res, file, fileList) {
      this.alterationRecordVO["alterationZipId"] =
        res.data.successData.zipFileInfoId;
    }
  }
};
</script>

<style lang="scss" scoped>
.page_addApply {
  margin-left: 20px;
  .apply_title {
    width: 280px;
    line-height: 40px;
    background-color: #409eff;
    color: #fff;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .x-subtitle {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 20px;
    color: rgba(102, 102, 102, 1);
    margin-bottom: 10px;
  }
  .x-textarea {
    margin-bottom: 20px;
  }
  .btn {
    margin-top: 50px;
  }
  /deep/ .el-form-item__label {
    line-height: 35px;
  }
  .common_input {
    /deep/ .el-input {
      width: 250px;
    }
  }
  .common_input1 {
    /deep/ .el-input {
      width: 150px;
    }
  }
}
</style>
